<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #myDIV {
      height: 2000px;
      width: 400px;
      margin-top: 10px;
      margin-left: 20px;
      border-top: 30px solid black;
      border-left: 40px solid red;
      background-color: lightblue;
      position: relative;
      left: 0px;
      top: 0px;
    }
  </style>
</head>

<body>
  <!-- \

  clientX 鼠标相对于浏览器左上角x轴的坐标； 不随滚动条滚动而改变；
  clientY 鼠标相对于浏览器左上角y轴的坐标； 不随滚动条滚动而改变；
  pageX 鼠标相对于浏览器左上角x轴的坐标； 随滚动条滚动而改变；
  pageY 鼠标相对于浏览器左上角y轴的坐标； 随滚动条滚动而改变；
  screenX 鼠标相对于显示器屏幕左上角x轴的坐标；
  screenY 鼠标相对于显示器屏幕左上角y轴的坐标；
  offsetX 鼠标相对于事件源左上角X轴的坐标；不带边框,margin 和padding
  offsetY 鼠标相对于事件源左上角Y轴的坐标；

  一、clientX、clientY
  点击位置距离当前body可视区域的x，y坐标
  二、pageX、pageY
  对于整个页面来说，包括了被卷去的body部分的长度
  三、screenX、screenY
  点击位置距离当前电脑屏幕的x，y坐标
  四、offsetX、offsetY
  相对于带有定位的父盒子的x，y坐标
  五、x、y
  和screenX、screenY一样 
-->
  <div id="myDIV">
    <p id="demo"></p>
  </div>
  <script>
    let div1 = document.querySelector("#myDIV")
    function myclick(event) {
      console.log("元素-->"+event.offsetX, event.offsetY)
      console.log("页面-->"+event.pageX, event.pageY)
      console.log("浏览器-->"+event.clientX, event.clientY)
      console.log("屏幕-->"+event.screenX, event.screenY)
    }
    div1.addEventListener("click", myclick)
  </script>

</body>

</html>